<script setup>
import { ref } from 'vue';

// 用于绑定当前选中的标签
const activeTab = ref('recommend');
</script>
<template>
<el-tabs v-model="activeTab" class="tab-nav" stretch>
<el-tab-pane label="推荐" name="recommend"></el-tab-pane>
  <el-tab-pane label="奇遇" name="adventure"></el-tab-pane>
<el-tab-pane label="戏台" name="stage"></el-tab-pane>
  <router-link :to="{name:'qiyu'}">
  <el-col>奇遇</el-col>
  </router-link>
<el-tab-pane label="罗小黑2" name="luoxiaohei2"></el-tab-pane>
<el-tab-pane label="热片解读" name="hot解读"></el-tab-pane>
</el-tabs>
</template>

<style scoped>
.tab-nav {
  /* 可根据实际需求调整导航栏样式，比如字体大小、颜色等 */
  font-size: 16px;
}

/* 调整选中标签的下划线样式，实现类似示例中的底部红色下划线效果 */
.el-tabs__nav-wrap::after {
  display: none;
}
.el-tabs__active-bar {
  background-color: red;
  height: 2px;
}
.el-tab-pane {
  padding: 0;
}
</style>